<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝鸡市残疾人服务平台</title>
    <link rel="stylesheet" href="explain.css">
</head>
<body>
    <div class="nav-box"> 
        <ul>
            <li>
                <div class="nav-block">
                  <a href="shouye.html"><i class="icon home"></i><span style="color: rgb(255, 255, 255)">系统首页</span></a>
                </div>
            </li>
           
           
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>招聘信息</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                  <a href="job.html" ><li><span style="color: white">工作岗位</span></li></a>
                    <a href="consequence.html"><li><span style="color: white">面试结果</span></li></a>
                </ul>
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>相关服务</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                  <a href="explain.html"><li><span style="color: rgb(255, 255, 255)">器械说明</span></li></a>
                  <a href="shopping.html"><li><span style="color: rgb(255, 255, 255)">商城</span></li></a>
                </ul>
            </li> 
            <li>
                <div class="nav-block">
                  <a href="train.html"><i class="icon user"></i><span style="color: rgb(255, 255, 255)">技术培训</span></a>
                
                </div>
               
            </li>
            <li>
              <div class="nav-block on twos">
                  <i class="icon order"></i><span>个人中心</span>
                  
                  <i class="arrow"></i>
              </div>
              <ul class="nav-two">
                  <a href="cjr.html"><li><span style="color: white">修改密码</span></li></a>
                  <a href="my.html"><li><span style="color: white">个人信息</span></li></a>
                  <a href="vital.html"><li><span style="color: white">个人简历</span></li></a>
                  
              </ul>
          </li>
           
        </ul>
    </div>
    <div>
        <div class="header"><h1>宝鸡市残疾人服务平台</h1></div>
        <div class="return">
            <a href="">退出登录</a>
        </div>
    </div>
    <div></div>
    <script>
        let nav=document.querySelector(".nav-box");
        nav.addEventListener("click",function(ev){
            if(ev.target.className.indexOf("two")>=0){
                ev.target.classList.toggle("on")
            }else if(ev.target.parentNode.className.indexOf("two")>=0){
                ev.target.parentNode.classList.toggle("on")
            }
        });
    </script>
       <nav class="sidebar">...</nav>
       <!-- 主内容区 -->
       <div class="product-image-card">
        <!-- 图片容器 -->
        <figure class="image-wrapper">
          <img src="image/help.jpg" 
               alt="生活自理和防护辅助器具" 
               class="main-image"
               loading="lazy">
          
          <!-- 悬停说明层 -->
          <div class="hover-info">
            <div class="info-content">
              <h3 class="product-title">助行架</h3>
              <ul class="spec-list">
                <li>生活自理和防护辅助器具</li>
                <li>适用于下肢功能障碍且不能抬起助行架前行的使用者，但其稳定性能较差</li>
                <li>适合下肢有些支撑能力和迈步能力，但肌力很弱、平衡和协调能力很差</li>
              </ul>
            </div>
            <!-- 浮动指示器 -->
            <div class="info-indicator">ℹ️ 悬停查看详情</div>
          </div>
        </figure>
        <!-- 底部按钮 -->
        <button class="detail-btn">
          查看技术参数
          <svg class="arrow" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
          </svg>
        </button>
      </div>
      <div class="product-image-card">
        <!-- 图片容器 -->
        <figure class="image-wrapper">
          <img src="image/watch.jpg" 
               alt="管理辅助器具" 
               class="main-image"
               loading="lazy">
          
          <!-- 悬停说明层 -->
          <div class="hover-info">
            <div class="info-content">
              <h3 class="product-title">盲人触觉手表</h3>
              <ul class="spec-list">
                <li>产品和物品管理辅助器具</li>
                <li>针对盲人的时间观念，通过使用盲人触觉手表可以知道时间</li> 
                <li>在触摸时的推动保持行时准确，要轻轻触摸，不能用力推动</li>
              </ul>
            </div>
            <!-- 浮动指示器 -->
            <div class="info-indicator">ℹ️ 悬停查看详情</div>
          </div>
        </figure>
        <!-- 底部按钮 -->
        <button class="detail-btn">
          查看技术参数
          <svg class="arrow" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
          </svg>
        </button>
      </div>
      <div class="product-image-card">
        <!-- 图片容器 -->
        <figure class="image-wrapper">
          <img src="image/balance.jpg" 
               alt="技能训练辅助器具" 
               class="main-image"
               loading="lazy">
          
          <!-- 悬停说明层 -->
          <div class="hover-info">
            <div class="info-content">
              <h3 class="product-title">平衡板</h3>
              <ul class="spec-list">
                <li>技能训练辅助器具</li>
                <li>针对运动失调患者的平衡问题，使用平衡板可以进行平衡、协调训练</li>
                <li>训练强度应由低到高，训练时间开始较短，逐渐延长</li>
              </ul>
            </div>
            <!-- 浮动指示器 -->
            <div class="info-indicator">ℹ️ 悬停查看详情</div>
          </div>
        </figure>
        <!-- 底部按钮 -->
        <button class="detail-btn">
          查看技术参数
          <svg class="arrow" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
          </svg>
        </button>
      </div>
      <div class="product-image-card">
        <!-- 图片容器 -->
        <figure class="image-wrapper">
          <img src="image/chair.jpg" 
               alt="日常生活辅助和环境适应辅助器具" 
               class="main-image"
               loading="lazy">
          
          <!-- 悬停说明层 -->
          <div class="hover-info">
            <div class="info-content">
              <h3 class="product-title">Armz Rokzi阿尔乔姆·螺栓紧固的扶手</h3>
              <ul class="spec-list">
                <li>日常生活辅助和环境适应辅助器具</li>
                <li>协助肢体残疾者和神经障碍者安全的坐着和站着</li>
                <li>帮助儿童和年轻的残疾人更好的融入主流学校环境</li>
              </ul>
            </div>
            <!-- 浮动指示器 -->
            <div class="info-indicator">ℹ️ 悬停查看详情</div>
          </div>
        </figure>
        <!-- 底部按钮 -->
        <button class="detail-btn">
          查看技术参数
          <svg class="arrow" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
          </svg>
        </button>
      </div>
   <script src="explain.js"></script>
</body>
</html>